<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">


  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <title>电影添加</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <style>

    #img img{
           width: 150px;
           height: 150px;
           object-fit: contain;
           border-radius: 5px;
           border:  1px solid gray;
         display: none;

       }
       .black{
         width: 150px;
         height: 30px;
         background:rgba(0, 0, 0, 0.5);
         position: absolute;
         top: 0px;
         border-radius: 5px 5px 0 0;
         display: none;

      
       }
       #img{
         position: relative;
         left: 100px;
         margin-top: 20px;
       }
       .close{
         float: right;
         font-size: 20px;
         display: none;
        
       }
  </style>
</head>

<body>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>
      <button data-target="student/newSelect.html" onclick="javascript:location.href='./movieSelect.html'" class="layui-btn layui-btn-sm">返回</button>
      添加电影
    </legend>
  </fieldset>

  <form class="layui-form"  action="" onsubmit="return false">
    <div class="layui-form-item">
      <label class="layui-form-label">电影名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" required  placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">英文名称</label>
      <div class="layui-input-inline">
        <input type="text" name="ename" required  placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">海报图</label>
      <button type="button" class="layui-btn" id="test1">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <input type="text" name="poster"  placeholder="请输入" autocomplete="off" class="layui-input" id="getPath">

      <div id="img">
        <div class="black"><i class="layui-icon layui-icon-close close"></i></div>
        <img src="" alt="">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">电影类型</label>
      <div class="layui-input-block" name="type" id="typet">
        <input type="checkbox"  title="爱情" name="a">
        <input type="checkbox"  title="喜剧" name="b">
        <input type="checkbox"  title="动画" name="c">
        <input type="checkbox"  title="剧情" name="d">
        <input type="checkbox"  title="恐怖" name="e">
        <input type="checkbox"  title="惊悚" name="f">
        <input type="checkbox"  title="科幻" name="g">
        <input type="checkbox"  title="动作" name="h">
        <input type="checkbox"  title="悬疑" name="i">
        <input type="checkbox"  title="犯罪" name="j">
        <input type="checkbox"  title="冒险" name="k">
        <input type="checkbox"  title="战争" name="l">
        <input type="checkbox"  title="奇幻" name="m">
        <input type="checkbox"  title="运动" name="n">
        <input type="checkbox"  title="家庭" name="o">
        <input type="checkbox"  title="古装" name="p">
        <input type="checkbox"  title="武侠" name="q">
        <input type="checkbox"  title="西部" name="r">
        <input type="checkbox"  title="历史" name="s">
        <input type="checkbox"  title="传记" name="t">
        <input type="checkbox"  title="歌舞" name="u">
        <input type="checkbox"  title="黑色电影" name="v">
        <input type="checkbox"  title="短片" name="w">
        <input type="checkbox"  title="纪录片" name="x">
        <input type="checkbox"  title="其他" name="y">




      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">首映地区</label>
      <div class="layui-input-block" name="area" id="areat">
        <input type="checkbox"  title="中国大陆" name="a">
        <input type="checkbox"  title="美国" name="b">
        <input type="checkbox"  title="韩国" name="c">
        <input type="checkbox"  title="日本" name="d">
        <input type="checkbox"  title="中国香港" name="e">
        <input type="checkbox"  title="中国台湾" name="f">
        <input type="checkbox"  title="泰国" name="g">
        <input type="checkbox"  title="印度" name="h">
        <input type="checkbox"  title="法国" name="i">
        <input type="checkbox"  title="英国" name="j">
        <input type="checkbox"  title="俄罗斯" name="k">
        <input type="checkbox"  title="意大利" name="l">
        <input type="checkbox"  title="西班牙" name="m">
        <input type="checkbox"  title="德国" name="n">
        <input type="checkbox"  title="波兰" name="o">
        <input type="checkbox"  title="澳大利亚" name="p">
        <input type="checkbox"  title="伊朗" name="q">
        <input type="checkbox"  title="其他" name="r">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">时长</label>
      <div class="layui-input-inline">
        <input type="text" name="time" required  placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">上映时间</label>
      <div class="layui-input-inline">
        <input type="text" name="upDate" placeholder="请选择日期" id="test2" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">评分</label>
      <div class="layui-input-inline">
        <input type="text" name="score" required  placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">票房</label>
      <div class="layui-input-inline">
        <input type="text" name="count" required  placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">简介</label>
      <div class="layui-input-block">
        <textarea name="intro" required  placeholder="请输入" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit="" lay-filter="*">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
  <script src="../js/lodash.min.js"></script>
  <script src="../layui/layui.js"></script>
  <script src="../js/jquery-1.12.4.min.js"></script>
  <script>
    $("#getPath").css("display","none")
    layui.use(['form', 'layer', 'laydate'], async function () {

      const form = layui.form;
      const layer = layui.layer;
      const laydate = layui.laydate;
      laydate.render({
      elem: '#test2'
      });
      form.on('submit(*)',async  function (data) { 
        data.field.area=""    
        data.field.type=""    
        $("#areat  .layui-form-checked span").each(function(i,elem){
          data.field.area+=$(this).context.innerHTML+","
        })
        $("#typet  .layui-form-checked span").each(function(i,elem){
          data.field.type+=$(this).context.innerHTML+","
        })
     
        const director=[]
                const a={
                    name: $("#name").val()
                    ,image:$("#getPath").val()
                }
                director.push(a)
                data.field.director=director
        console.log(data.field)
        await $.post("/api/movie", data.field, function () {
          layer.msg('添加电影成功', {
            icon: 1,
            time: 1000
          }, function () {
            javascript: location.href = './movieSelect.html';
          });
        });
      });
      form.render();
    });
  
      //监听提交



  </script>
  <script>
    layui.use('upload', function () {
      var upload = layui.upload;

      //执行实例
      var uploadInst = upload.render({
        elem: '#test1' //绑定元素
        , url: '/api/movieupload/' //上传接口
        , field: "imgfile"
        , acceptMime: "image/*"
        , size: 500
        , drage: true
        , done: function (res) {
          //上传完毕回调
          $("#img img").prop("src", res.data[0])
          $("#getPath").val(res.data[0])
          $(".black").show();
          $(".black i").show();
          $("#img img").show();
          $(".black i").click(function () {
            $("#img img").prop("src", "")
            $(".black").hide();
            $(".black i").hide();
            $("#img img").hide();
          })

        }
        , error: function () {
          //请求异常回调
          console.log("错误")
        }
      });
    });
  </script>
</body>

</html>